import { Component, ElementRef, OnChanges, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';

@Component({
  selector: 'apes-loadRefresh',
  templateUrl: 'apes-load-refresh.component.html',
})

export class ApesLoadRefreshComponent implements OnInit, OnChanges {

  Info: any;
  @Input('Percentage') Percentage: number;
  @Input('IsRefreshFinish') IsRefreshFinish: boolean;
  @Input('IsNextPageFinish') IsNextPageFinish: boolean;
  @Input('IsSlideLeftFinish') IsSlideLeftFinish: boolean;
  @Input('IsSlideRightFinish') IsSlideRightFinish: boolean;
  @Output('onRefresh') onRefresh: EventEmitter<any> = new EventEmitter();
  @Output('onNextPage') onNextPage: EventEmitter<any> = new EventEmitter();
  @Output('onSlideLeft') onSlideLeft: EventEmitter<any> = new EventEmitter();
  @Output('onSlideRight') onSlideRight: EventEmitter<any> = new EventEmitter();

  @ViewChild('divTop',{static:false}) divTop: ElementRef;
  @ViewChild('divContent',{static:false}) divContent: ElementRef;
  @ViewChild('divBottom',{static:false}) divBottom: ElementRef;

  constructor() {
    this.Info = {
      Start: { X: 0, Y: 0 },
      Move: { X: 0, Y: 0 },
      End: { X: 0, Y: 0 },
      TitleTop: '下拉刷新',
      TitleBottom: '上拉获取下面数据',
    };
  }

  ngOnInit() {
  }

  ngOnChanges(): void {
    if (!this.IsNextPageFinish) {
      let { Info, divBottom } = this;
      Info.TitleBottom = '加载完成...';
      setTimeout(() => {
        divBottom.nativeElement.style.height = '0px';
        setTimeout(() => {
          // divBottom.nativeElement.style.display = 'none';
          Info.TitleTop = '下拉刷新...';
          delete Info.IsTitleTop;
        }, 500);
      }, 500);
    }
    if (!this.IsRefreshFinish) {
      let { Info, divTop } = this;
      Info.TitleTop = '更新完成...';
      setTimeout(function () {
        divTop.nativeElement.style.height = '0px';
        setTimeout(() => {
          // divTop.nativeElement.style.display = 'none';
          Info.TitleTop = '下拉刷新...';
          delete Info.IsTitleTop;
        }, 500);
      }, 500);
    }
  }

  __UpdateLocation(type, event) {
    let { changedTouches } = event;
    let { clientX, clientY } = changedTouches[0];
    this.Info[type].X = clientX;
    this.Info[type].Y = clientY;
  }

  OnTouchStart(event) {
    this.__UpdateLocation('Start', event);
  }

  OnTouchMove(event) {
    this.__UpdateLocation('Move', event);
    this.__JudgeRefreshOrNextPage();
  }

  OnTouchEnd(event) {
    this.__UpdateLocation('End', event);
    this.__RefreshOrNextPageEnd();
    let { Start, End } = this.Info;

    let xes = End.X - Start.X;
    let yes = End.Y - Start.Y;

    let absXes = Math.abs(xes);
    let absYes = Math.abs(yes);

    if (absXes < 10 && absYes < 20) {
      this.__Reset();
      return;
    }
    if (xes > 0) {
      // 右
      if (yes > 0) {
        // 向下
        // 判断主向
        if (absXes > absYes) {
          // 向右。
          this.SlideRight();
        } else {
          // 向下。
          this.SlideRefresh();
        }
      } else {
        // 向上
        if (absXes > absYes) {
          // 向右。
          this.SlideRight();
        } else {
          // 向上。
          this.SlideNextPage();
        }
      }
    } else {
      // 左边
      if (yes > 0) {
        // 向下
        if (absXes > absYes) {
          // 向左。
          this.SlideLeft();
        } else {
          // 向下。
          this.SlideRefresh();
        }
      } else {
        // 向上
        if (absXes > absYes) {
          this.SlideLeft();
        } else {
          this.SlideNextPage();
        }
      }
    }
  }

  __Reset() {
    let { divTop, divBottom, Info } = this;
    divTop.nativeElement.style.height = '0px';
    divBottom.nativeElement.style.height = '0px';
    divTop.nativeElement.style.display = 'none';
    divBottom.nativeElement.style.display = 'none';
    Info.TitleTop = '下拉刷新';
    Info.TitleBottom = '上拉获取下面数据';
  }

  SlideLeft() {
    let { onSlideLeft } = this;
    if (onSlideLeft) {
      onSlideLeft.emit();
    }
  }

  SlideRight() {
    let { onSlideRight } = this;
    if (!onSlideRight) {
      return;
    }
    onSlideRight.emit();
  }

  SlideNextPage() {
    let { onNextPage, Percentage, Info, divBottom } = this;
    if (!onNextPage) {
      return;
    }
    let __ctrl = document.body.children[0].children[1];
    let { scrollTop, scrollHeight } = __ctrl;

    let __bodyScrollTop = scrollTop;
    let __bodyScrollHeight = scrollHeight;
    let __differValue = ((__bodyScrollHeight - __bodyScrollTop - screen.height) / __bodyScrollHeight) * 100;
    if (__differValue > (Percentage < 3 ? 3 : Percentage)) {
      this.__Reset();
      return;
    }
    onNextPage.emit();

    if (!Info.IsTitleBottom) {
      Info.TitleBottom = '正在获取数据...';
      divBottom.nativeElement.style.height = '30px';
    } else {
      divBottom.nativeElement.style.height = '0px';
    }
  }

  SlideRefresh() {
    //const { onRefresh } = this;
    if (!this.onRefresh) {
      return;
    }
    let __ctrl = document.body.children[0].children[1];
    let { scrollTop } = __ctrl;
    if (scrollTop === 0) {
      this.onRefresh.emit();

      const { Info, divTop } = this;
      if (!Info.IsTitleTop) {
        Info.TitleTop = '更新中...';
        divTop.nativeElement.style.height = '40px';
      } else {
        divTop.nativeElement.style.height = '0px';
      }
    } else {
      this.__Reset();
    }
  }

  __JudgeRefreshOrNextPage() {
    let { Start, Move, TitleTop } = this.Info;
    let xes = Move.X - Start.X;
    let yes = Move.Y - Start.Y;
    let absXes = Math.abs(xes);
    let absYes = Math.abs(yes);
    let { divTop, divBottom } = this;
    if (absXes > 20) {
      if (absYes < absXes) {
        return;
      }
    }
    if (yes > 0) { // Refresh 操作
      divTop.nativeElement.style.display = 'inherit';
      if (yes > 20 && yes <= 60) {
        this.Info.TitleTop = '下拉刷新...';
      }
      if (yes > 60) {
        this.Info.IsTitleTop = true;
        this.Info.TitleTop = '释放刷新数据...';
      }
      if (yes < 120) {
        divTop.nativeElement.style.height = yes + 'px';
      }
    } else {
      divBottom.nativeElement.style.display = 'inherit';
      if (absYes > 20 && absYes <= 40) {
        this.Info.TitleBottom = '上拉加获取数据...';
      }
      if (absYes > 40) {
        this.Info.IsTitleBottom = true;
        this.Info.TitleBottom = '释放加载下一页数据...';
      }
      if (absYes < 60) {
        divBottom.nativeElement.style.height = absYes + 'px';
      }
    }
  }

  __RefreshOrNextPageEnd() {

  }
}
